<template>
  <div class="editor">
    <div class="clearfix title">
      <div class="left">
        <span>您的权限是: {{token}}</span>
        <img src="./f778738c-e4f8-4870-b634-56703b4acafe.gif" class="animate" :class="isOpen">
      </div>
      <div class="right">
        <div class="caption">
          <h3>Normal Editor</h3>
          <p>普通编辑dashboard</p>
        </div>
      </div>
    </div>
    <div class="pic">
      <img src="./0e03b7da-db9e-4819-ba10-9016ddfdaed3.gif"/>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    components: {
    },
    data () {
      return {
        isOpen: ''
      }
    },
    computed:{
      ...mapGetters(['token'])
    },
    methods:{
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .editor{
    width: 100%;
    height: 100%;
    position: relative;

    padding: 60px;
    background-color: #e3e3e3;

    .title{
      .left{
        float: left;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;

        border-radius: 50%;
        box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);

        position: relative;

        img{
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;

          width: 100%;
          height: 100%;

          border-radius: 50%;
          overflow: hidden;
        }

        .animate{
          transition: transform .3s ease;
          transform-origin: right center;
        }
        &:hover{
          .animate{
            transform: rotateZ(-90deg);
          }
        }
      }
      .right{
        margin-left: 200px;

        /*垂直居中*/
        line-height: 150px;
        font-size: 0;

        .caption {
          display: inline-block;
          vertical-align: middle;
          h3 {
            font-size: 48px;
            line-height: 48px;
            color: #212121;
            margin: 0;
            padding: 0;
          }
          p {
            line-height: 1;
            font-size: 20px;
          }
        }
      }
    }
    .pic{
      width: 45%;
      margin: 0 auto;

      img{
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }
</style>
